import { createRouter, createWebHashHistory } from 'vue-router';
import {isLogin} from '@/utils/tools.js'

// 创建路由对象：完成整个项目的路由管理（如：路由配置，路由跳转，路由模式，路由守卫的相关函数）

const router =  createRouter({
  history:createWebHashHistory(),
  routes: [
   {
    path: '/',
    redirect:"/Login"
   },
   {
    name:"Login",
    path:"/Login",
    component:()=>import("../views/Login.vue"),
    meta:{
      requireAuth:"no"
    }
   },
   {
    name:"Admin",
    path:"/Admin",
    component:()=>import("../views/Layout.vue"),
    children:[
      {
        path:"",
        redirect:"/Admin/Lifecycle_options"
      },
      {
        name:"Lifecycle",
        path:"Lifecycle_options",
        component:()=>import("../views/Lifecycle/Lifecycle_options.vue"),

      },
      {
        name:"Lifecycle_composition",
        path:"Lifecycle_composition",
        component:()=>import("../views/Lifecycle/Lifecycle_composition.vue")
        
      },
      {
        name:"Lifecycle_ParentSon",
        path:"Lifecycle_ParentSon",
        component:()=>import("../views/Lifecycle/Lifecycle_ParentSon/Parent.vue"),
        // beforeEnter:(to,from,next)=>{
        //   if(!isLogin()){
        //     next("/Login")
        //   }else{
        //     next();
        //   }
        // }
      },
      {
        name:"ParentToSon",
        path:"ParentToSon",
        component:()=>import("../views/ComponentChuan/ParentToSon/Parent.vue")
      },
      {
        name:"Brother",
        path:"Brother",
        component:()=>import("../views/ComponentChuan/Brother/index.vue")
      },
      {
        name:"TransferValueDemo",
        path:"TransferValueDemo",
        component:()=>import("../views/ComponentChuan/demo/index.vue")
      },
      {
        name:"TransferValueDemo02",
        path:"TransferValueDemo02",
        component:()=>import("../views/ComponentChuan/demo02/index.vue")
      },
      {
        name:"refdemo",
        path:"refdemo",
        component:()=>import("../views/ComponentChuan/refdemo/Parent.vue")
      },
      {
        name:"refdemo02",
        path:"refdemo02",
        component:()=>import("../views/ComponentChuan/refdemo02/Parent.vue")
      },
      {
        name:"providerAndInject",
        path:"providerAndInject",
        component:()=>import("../views/ComponentChuan/providerAndInject/Parent.vue")
      },
      {
        name:"List",
        path:"List",
        component:()=>import("../views/routeChuan/params/List.vue")
      },
      {
        name:"Detail",
        path:"Detail/:id",
        component:()=>import("../views/routeChuan/params/Detail.vue")
      },
      {
        name:"List02",
        path:"List02",
        component:()=>import("../views/routeChuan/query/List.vue")
      },
      {
        name:"Detail02",
        path:"Detail02",
        component:()=>import("../views/routeChuan/query/Detail.vue")
      }
    ]
   }
  ]
})

console.log("router",router);

// 一、全局路由守卫：整个项目中所有的路由跳转（路径发生变化），都会经历全局路由守卫
// 1、前置钩子函数：地址栏路径发生变化后，进行路由匹配之前。
router.beforeEach((to,from,next)=>{
  console.log("前置");

  // to: 要去的路由对象（跟$route是同类型的对象）
  // from：从哪里来（当前路由对象）（跟$route是同类型的对象）
  console.log("to",to);
  console.log("from",from);

  // 非登录页面都需要守卫。
  // if( to.path !== "/Login" ){
  if(to.meta.requireAuth != "no" ){
    // if(没有登录过){
    if(!isLogin()){ 
      next("/Login");
    }else{
      next(true);
    }
  }
  next();
})



// 2、路由守卫后置钩子函数：确定了要去的路径（并匹配到合适的组件）后，先调用该钩子函数，再创建组件
router.afterEach((to,from)=>{
  console.log("后置");
  console.log("to",to);
  console.log("from",from);
  // 可以发送请求，把数据保存在vuex或者pinia里，然后，在组件里从vuex或者pinia里获取。这样的话，请求的更早
})


export default router;
